<template>
  <div class="diy2">
    <h3> Study1DiyDemo2 </h3>
    <h1>组合式Api</h1>
    <p>{{ str }}</p>
    <p>{{ str2 }}</p>
    <p>如果你显式地使用了 setup 函数而不是
      script setup，则事件需要通过 emits 选项来定义，emit 函数也被暴露在 setup() 的上下文对象上</p>
    <button type="button" @click="changeStr">修改str</button>
    <myComp />
  </div>
</template>

<script>
import { ref } from 'vue'
import myComp from '../study2/diyDemo6.vue';

export default {
  name: 'diyDemo2',
  components: {
    myComp
  },
  // 如果你显式地使用了 setup 函数而不是 <script setup>，则事件需要通过 emits 选项来定义，emit 函数也被暴露在 setup() 的上下文对象上
  // 与 setup() 上下文对象中的其他属性一样，emit 可以安全地被解构
  // emits 选项声明触发的事件
  emits: ['inFocus'],
  // 记得传参给 setup
  setup(props, ctx) {
    // setup中访问this是undefined。
    console.log(this) // undefined

    // 普通变量
    let str = '我是组合式api的普通变量str'

    // 响应式变量
    const str2 = ref('我是响应式变量str2')

    const changeStr = () => {
      // emit 触发一个绑定到子组件上的事件
      ctx.emit('inFocus')
      console.log('changeStr') // changeStr
      str = '我不能响应式显示UI的效果'
      console.log(str)
      str2.value = '我是响应式变量，我可以触发UI的更新'
      fun1()
    }
    const fun1 = () => {
      console.log('fun1')
    }

    return {
      str,
      str2,
      changeStr
    }
  }
}
</script>

<style lang="scss" scoped>
.diy2 {
  padding: 10px;
  margin: 10px;
  border: 3px solid deeppink;
}
</style>
